<template>
  <view>
    <uni-file-picker :modelValue="imageValueComputed" ref="$image" @delete="remove" />
    <uni-forms ref="form" :modelValue="formData" :rules="rules" style="padding: 10rpx;">
      <uni-forms-item label="车型" :label-width="100" name="type">
        <uni-easyinput type="text" v-model="formData.type" placeholder="请输入车型" />
      </uni-forms-item>
      <uni-forms-item label="故障码" :label-width="100" name="code">
        <uni-easyinput type="text" v-model="formData.code" placeholder="请输入故障码" />
      </uni-forms-item>
      <uni-forms-item label="故障码释义" :label-width="100" name="phenomenon">
        <uni-easyinput type="text" v-model="formData.phenomenon" placeholder="请输入故障码释义" />
      </uni-forms-item>
      <uni-forms-item label="故障位置" :label-width="100" name="result">
        <uni-easyinput type="text" v-model="formData.result" placeholder="请输入故障位置" />
      </uni-forms-item>
      <uni-forms-item label="涉及工段" :label-width="100" name="responsibility">
        <uni-easyinput type="text" v-model="formData.responsibility" placeholder="请输入涉及工段" />
      </uni-forms-item>
    </uni-forms>
    <button @click="submit" type="primary">提交</button>
  </view>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { addFaultRecord } from "@/api/fault-record"
import { useFaultRecord } from '@/stores'
import { computed } from 'vue'

const $image = ref()

const formData = reactive({
  id: null,
  type: '',
  code: '',
  phenomenon: '',
  responsibility: '',
  result: '',
  info: {
    images: [],
    logo: ''
  }
})

const imageValueComputed = computed(() => {
  const images = formData.info?.images?.map((a: string) => ({
    "name": a,
    "extname": a.split('.')[1],
    "url": a.startsWith('data:image') ? a : uni.$util.parse(a)
  }))
  return images ?? []
})

const removes = []
const remove = (file) => {
  if (file.tempFilePath.startsWith('blob')) return
  removes.push(file.tempFile.name)
}

const faultStore = useFaultRecord()

const form = ref()

const rules = {
  type: {
    rules: [{
      required: true,
      errorMessage: '请输入车型',
    }]
  },
  code: {
    rules: [{
      required: true,
      errorMessage: '请输入故障码',
    }]
  },
  phenomenon: {
    rules: [{
      required: true,
      errorMessage: '请输入故障码释义',
    }]
  },
  responsibility: {
    rules: [{
      required: true,
      errorMessage: '请输入涉及工段',
    }]
  },
  result: {
    rules: [{
      required: true,
      errorMessage: '请输入故障位置',
    }]
  }
}

const submit = async () => {

  const files = $image.value.files.filter(a => a.url.startsWith('blob'))
  const adds = []
  for (let index = 0; index < files.length; index++) {
    const file = files[index];
    const data = await uni.$util.ImageToBase64(file.path, 750, file.extname)
    adds.push({ source: data.replace(/^data:image.+base64,/, ''), type: file.extname })
  }

  try {
    await form.value.validate()
    if ($image.value.files.length > 0) {
      formData.info.logo = await uni.$util.ImageToBase64($image.value.files[0].path, 150, $image.value.files[0].extname)
    }
    uni.showLoading()
    const data = await addFaultRecord({ ...formData, adds, removes })
    uni.hideLoading()
    if (faultStore.faultRecord?.id) {
      faultStore.set(data)
    }

    uni.showToast({ icon: 'success', title: '操作成功' })

    setTimeout(() => {
      uni.navigateBack({ delta: 1, })
    }, 1500)
  } catch (e) {
    console.error(e)
    return
  }

}

onMounted(() => {
  formData.id = faultStore.faultRecord?.id ?? null
  formData.type = faultStore.faultRecord?.type ?? ''
  formData.code = faultStore.faultRecord?.code ?? ''
  formData.phenomenon = faultStore.faultRecord?.phenomenon ?? ''
  formData.responsibility = faultStore.faultRecord?.responsibility ?? ''
  formData.result = faultStore.faultRecord?.result ?? ''
  formData.info = faultStore.faultRecord?.info ?? {
    images: [],
    logo: ''
  }
})

</script>

<style lang="scss" scoped></style>